<template>
<div class="hello">
	<h3>跨域请求豆瓣网数据</h3>
	<button @click="getData()" type="button" name="button">获取数据</button>
	<div class="">
		<el-row>
			<el-col style="margin-bottom:20px;" :span="3" v-for="(o, index) in doubanData" :key="o" :offset="index > 0 ? 2 : 0">
				<el-card :body-style="{ padding: '0px' }">
					<img :src="o.images.large" class="image">
					<div style="padding: 14px;">
						<span>{{o.title.substr(0,5)}}</span>
						<div class="bottom clearfix">
							<time class="time">{{ o.year }}</time>
							<el-button type="text" class="button">操作按钮</el-button>
						</div>
					</div>
				</el-card>
			</el-col>
		</el-row>
	</div>


</div>
</template>

<script>
import Vue from 'vue';
export default {
	name: 'hello',
	data() {
		return {
			doubanData: []
		}
	},
	methods: {
		currentDate: new Date(),
		getData() {
			let url = '/api/v2/movie/in_theaters';
			Vue.axios({
				method: 'get',
				url: url,
				headers: {
					'Content-Type': 'application/text'
				}
			}).then(res => {
				this.doubanData = res.data.subjects;
				console.log(this.doubanData);
			})
		}
	}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.time {
	font-size: 13px;
	color: #999;
}

.bottom {
	margin-top: 13px;
	line-height: 12px;
}

.button {
	padding: 0;
	float: right;
}

.image {
	width: 100%;
	display: block;
	max-height: 165px;
}

.clearfix:before,
.clearfix:after {
	display: table;
	content: "";
}

.clearfix:after {
	clear: both
}
</style>
